<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<head>
    <title>Profile | Klorofil - Free Bootstrap Dashboard Template</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- VENDOR CSS -->
    <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/vendor/linearicons/style.css">
    <!-- MAIN CSS -->
    <link rel="stylesheet" href="../assets/css/main.css">
    <!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
    <link rel="stylesheet" href="../assets/css/demo.css">
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
    <!-- ICONS -->
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
    <link rel="icon" type="image/png" sizes="96x96" href="../assets/img/favicon.png">
    <link rel="stylesheet" href="../assets/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css">
    <style type="text/css">
        hr {
            height: 1px;
            border: none;
            border-top: 1px solid #555555;
            margin-top: 5px;
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
<!-- WRAPPER -->
<div id="wrapper">
    <!-- NAVBAR -->
    <%@include file="../top-bar.jsp" %>
    <!-- END NAVBAR -->
    <!-- LEFT SIDEBAR -->
    <%@include file="../left-bar.jsp" %>
    <!-- END LEFT SIDEBAR -->
    <!-- MAIN -->
    <div class="main">
        <!-- MAIN CONTENT -->
        <div class="main-content">
            <div class="container-fluid">
                <input type="hidden" name="userId" id="userId" value="${param.userId}">
                <%--第一行 用户当前身体情况 和运动爱好分析--%>
                <div class="panel panel-profile row">
                    <div class="clearfix">
                        <!-- LEFT COLUMN -->
                        <div class="col-md-7">
                            <!-- PROFILE HEADER -->
                            <div class="profile-header">
                                <div class="overlay"></div>
                                <div class="profile-main">
                                    <img src="../assets/img/user-medium.png" class="img-circle" alt="Avatar">
                                    <h3 class="name" id="username">姓名</h3><br/>
                                    <span class="online-status status-available" id="sportStatus">运动状态（运动中/未运动）</span>
                                </div>
                                <hr>
                                <div class="profile-stat">
                                    <div class="row">
                                        <div class="col-md-4 stat-item">
                                            体重（kg）<span>45</span>
                                        </div>
                                        <div class="col-md-4 stat-item">
                                            BMI<span>20.6 </span>
                                        </div>
                                        <div class="col-md-4 stat-item">
                                            身高（cm）<span>165</span>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="profile-stat">
                                    <div class="row">
                                        <div class="col-md-4 stat-item">
                                            胸围（cm）<span>45</span>
                                        </div>
                                        <div class="col-md-4 stat-item">
                                            腰围（cm）<span>20.6 </span>
                                        </div>
                                        <div class="col-md-4 stat-item">
                                            臀围（cm）<span>165</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- END PROFILE HEADER -->
                            <!-- PROFILE DETAIL -->
                            <div class="profile-info" style="margin-top: 40px;margin-bottom: 10px">
                                <h5 class="heading" style="width: 300px;position: relative;left: 360px;bottom: 20px">
                                    录入时间： <span>2018-4-23 09:54:34</span></h5>
                            </div>
                            <!-- END PROFILE DETAIL -->
                        </div>
                        <!-- END LEFT COLUMN -->
                        <!-- RIGHT COLUMN -->
                        <div class="col-md-5">
                            <h4 class="heading">运动兴趣分析</h4>
                            <!-- TASKS -->
                            <div class="panel" style="margin-top: 50px">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Favorite sports</h3>
                                    <div class="right">
                                        <button type="button" class="btn-toggle-collapse"><i
                                                class="lnr lnr-chevron-up"></i></button>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    <ul class="list-unstyled task-list">
                                        <li>
                                            <p>户内跑步<span class="label-percent">23%</span></p>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar progress-bar-danger" role="progressbar"
                                                     aria-valuenow="23" aria-valuemin="0" aria-valuemax="100"
                                                     style="width:23%">
                                                    <span class="sr-only">23% Complete</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <p>户外跑步 <span class="label-percent">80%</span></p>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar progress-bar-success" role="progressbar"
                                                     aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"
                                                     style="width: 80%">
                                                    <span class="sr-only">80% Complete</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <p>户外骑行<span class="label-percent">45%</span></p>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar progress-bar-warning" role="progressbar"
                                                     aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
                                                     style="width: 45%">
                                                    <span class="sr-only">45% Complete</span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!-- END TASKS -->
                        </div>
                        <!-- END RIGHT COLUMN -->
                    </div>
                </div>
                <%--第二行 用户身体情况展示--%>
                <div class="panel panel-profile row" style="height: 400px">
                    <div class="col-md-6" style="padding-top: 20px">
                        <!-- VISIT CHART -->
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">体重</h3>
                                <div class="center" style="border: 1px red solid;width: 50px">
                                    <label class="labe_l">选择日期:</label>
                                    <div class="clearfix tex_t reset_text">
                                        　　<div class="input-append date fl"  id="datetimeStart">
                                        <input type="text" class="" readonly>
                                        <span class="add-on"><i class="icon-th"></i></span>
                                    </div>
                                        <span class="to_link">至</span>
                                        <div class="input-append date fl"  id="datetimeEnd">
                                            <input type="text" class="" readonly>
                                            <span class="add-on"><i class="icon-th"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="right">
                                    <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i>
                                    </button>
                                    <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                                </div>
                            </div>
                            <div class="panel-body">
                                <div id="user_weight" class="ct-chart" style="width:90%;height:70%;"></div>
                            </div>
                        </div>
                        <!-- END VISIT CHART -->
                    </div>
                    <div class="col-md-6" style="padding-top: 20px">
                        <!-- VISIT CHART -->
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">BMI</h3>
                                <div class="right">
                                    <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i>
                                    </button>
                                    <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                                </div>
                            </div>
                            <div class="panel-body">
                                <div id="user_bmi" class="ct-chart" style="width:90%;height:70%;"></div>
                            </div>
                        </div>
                        <!-- END VISIT CHART -->
                    </div>
                </div>
            </div>
        </div>
        <!-- END MAIN CONTENT -->
    </div>
    <!-- END MAIN -->
    <div class="clearfix"></div>
    <%@include file="../footer-bar.jsp" %>
</div>
<!-- END WRAPPER -->
<!-- Javascript -->
<script src="../assets/vendor/jquery/jquery.min.js"></script>
<script src="../assets/scripts/jquery-3.3.1.min.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="../assets/scripts/klorofil-common.js"></script>
<script src="../assets/scripts/echarts.common.min.js"></script>
<script src="../assets/scripts/bootstrap-datetimepicker.min.js"></script>
<script src="../assets/scripts/bootstrap-datepicker.zh-CN.js"></script>
<script src="../assets/scripts/moment.js"></script>
<script type="application/javascript">
    //日期插件初始化
    $('#datetimeStart').datepicker({
        language:  'zh-CN',
        format:'yyyy-mm-dd',
        weekStart: 1, /*以星期一为一星期开始*/
        todayBtn:  1,
        autoclose: 1,
        minView:2, /*精确到天*/
        pickerPosition: "bottom-left"
    }).on("changeDate",function(ev){  //值改变事件
        //选择的日期不能大于第二个日期控件的日期
        if(ev.date){
            $("#datetimeEnd").datetimepicker('setStartDate', new Date(ev.date.valueOf()));
        }else{
            $("#datetimeEnd").datetimepicker('setStartDate',null);
        }
    });
    $('#datetimeEnd').datepicker({
        language:  'zh-CN',
        format:'yyyy-mm-dd',
        weekStart: 1, /*以星期一为一星期开始*/
        todayBtn:  1,
        autoclose: 1,
        minView:2, /*精确到天*/
        pickerPosition: "bottom-left"
    }).on("changeDate",function(ev){
        //选择的日期不能小于第一个日期控件的日期
        if(ev.date){
            $("#datetimeStart").datetimepicker('setEndDate', new Date(ev.date.valueOf()));
        }else{
            $("#datetimeStart").datetimepicker('setEndDate',new Date());
        }
    });

    function getOneUserBodyByUserId() {
        var userId = $("#userId").val();
        $.ajax({
            url: "/user/body/getUserBodyInfoDetial",
            data: {
                userid: userId
            },
            type: "post",
            dataType: "json",
            success: function (result) {

            },
            error: function () {
                alert("没有获取到这个用户的身体信息");
            }
        });
    }

    $(function () {
        //页面加载的时候获取用户的身体信息
        getOneUserBodyByUserId();
    })
    // 基于准备好的dom，初始化echarts实例
    var myWeightLine = echarts.init(document.getElementById('user_weight'));

    var Xdata = [];
    Xdata.push("1");
    Xdata.push("2");
    Xdata.push("3");
    Xdata.push("5");
    var weightData = [56,59,57];
    // 指定图表的配置项和数据
    option = {
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['体重变化']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                magicType : {show: true, type: ['line', 'bar']},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : Xdata
            }
        ],
        yAxis : [
            {
                type : 'value',
                min:50,
                max:60,
                axisLabel : {
                    formatter: '{value} kg'
                }
            }
        ],
        series : [
            {
                name:'体重变化',
                type:'line',
                data:weightData,
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    silent:true,
                    data : [
                        {name : '体重标准线', yAxis: 58}
                    ],
                    label:{
                        show:true
                    },
                    animation:true
                }
            },
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myWeightLine.setOption(option);
</script>
</body>

</html>
